import World from '../src/World'

const cv = document.createElement('canvas')
cv.width = 375
cv.height = 667
const offcv = document.createElement('canvas')
offcv.width = cv.width
offcv.height = cv.height
const offctx = offcv.getContext('2d')

const ctx = cv.getContext('2d')
class A{
    constructor(opt){
        Object.assign(this.style, opt)
    }
    set src(val){
        if(/\.mp4$/.test(val)){
            let video = document.createElement('video')
            video.addEventListener('canplay', () => {
                this.width = video.videoWidth
                this.height = video.videoHeight
                let style = this.style
                let opt = {
                    boxX: style.x,
                    boxY: style.y,
                    boxW: style.width,
                    boxH: style.height,
                    mediaW: this.width,
                    mediaH: this.height
                }
                this.rect = A.rect(opt, this.mode)
                this.radiusInfo = A.radius(this.style)
                this._media = video
                video.play()
                this.isVideo = true
            })
            video.src = val
        }else{
            let img = new Image()
            img.onload = () => {
                this.width = img.width
                this.height = img.height
                let style = this.style
                let opt = {
                    boxX: style.x,
                    boxY: style.y,
                    boxW: style.width,
                    boxH: style.height,
                    mediaW: this.width,
                    mediaH: this.height
                }
                this.rect = A.rect(opt, this.mode)
                this.radiusInfo = A.radius(this.style)
                this._media = img
                this.isVideo = false
            }
            img.src = val
        }
    }
    width = 0
    height = 0
    style = {}
    rect = null
    radiusInfo = null
    _media = null
    static radius(style){
        let r = style.radius
        if(typeof r !== 'number' || r <= 0) return null
        let {x, y, width: w, height: h} = style
        let min = Math.min(w, h)/2
        if(r > min) r = min
        let points = []
        points.push([
            x+r, y
        ],[
            x+w-r, y
        ],[
            x+w, y
        ],[
            x+w, y+r
        ],[
            x+w, y+h-r
        ],[
            x+w, y+h
        ],[
            x+w-r, y+h
        ],[
            x+r, y+h
        ],[
            x, y+h
        ],[
            x, y+h-r
        ],[
            x, y+r
        ],[
            x, y
        ])
        return {
            points,
            radius: r
        }
    }

    static rect(opt, mode) {
        const o = Object.assign({
            boxX: 0,
            boxY: 0,
            boxW: 375,
            boxH: 667,
            mediaW: 540,
            mediaH: 960
        }, opt);
        const res = {
            boxX: o.boxX,
            boxY: o.boxY,
            boxW: o.boxW,
            boxH: o.boxH,
            cutX: 0,
            cutY: 0,
            cutW: o.mediaW,
            cutH: o.mediaH,
            drawX: o.boxX,
            drawY: o.boxY,
            drawW: o.boxW,
            drawH: o.boxH,
            mediaX: o.boxX,
            mediaY: o.boxY,
            mediaW: o.boxW,
            mediaH: o.boxH
        }

        if(mode && A[mode]) A[mode](o, res)
        return res
    }
    /**
     * contain模式，无裁剪，居中，较长边拉伸。同h5的object-fit: contain。
     * @param {object} o 入参配置，参考rect方法的o对象
     * @param {object} res 返回对象，参数rect方法的res返回对象
     */
    static contain(o, res){
        const scale = o.mediaH / o.mediaW
        const boxScale = o.boxH / o.boxW
        if(scale > boxScale){
            res.drawH = o.boxH
            res.drawW = Math.round(o.boxH / scale)
            res.drawX = Math.round((o.boxW - res.drawW) / 2 + o.boxX)
            res.drawY = o.boxY
        }else{
            res.drawW = o.boxW
            res.drawH = Math.round(o.boxW * scale)
            res.drawX = o.boxX
            res.drawY = Math.round((o.boxH - res.drawH) / 2 + o.boxY)
        }
        res.mediaX = res.drawX
        res.mediaY = res.drawY
        res.mediaW = res.drawW
        res.mediaH = res.drawH
    }
    render(ctx){
        ctx.save()
        let rect = this.rect
        if(!ctx || !this._media || !rect) return
        let radiusInfo = this.radiusInfo
        let bw = this.style.borderWidth || 0
        let bc = this.style.borderColor || '#000000'
        if(bw <= 0) bc = 'transparent'
        ctx.fillStyle =  this.style.bgcolor || '#000000'
        ctx.lineWidth = bw
        ctx.strokeStyle = bc
        ctx.beginPath()
        if(radiusInfo){
            let points = radiusInfo.points
            let radius = radiusInfo.radius
            ctx.moveTo(points[0][0], points[0][1])
            ctx.lineTo(points[1][0], points[1][1])
            ctx.arcTo(points[2][0], points[2][1], points[3][0], points[3][1], radius)
            ctx.lineTo(points[4][0], points[4][1])
            ctx.arcTo(points[5][0], points[5][1], points[6][0], points[6][1], radius)
            ctx.lineTo(points[7][0], points[7][1])
            ctx.arcTo(points[8][0], points[8][1], points[9][0], points[9][1], radius)
            ctx.lineTo(points[10][0], points[10][1])
            ctx.arcTo(points[11][0], points[11][1], points[0][0], points[0][1], radius)
            ctx.closePath()
            ctx.stroke()
        }else{
            ctx.strokeRect(rect.boxX, rect.boxY, rect.boxW, rect.boxH)
        }
        ctx.fill()
        ctx.restore()
        ctx.save()
        if(!this.isVideo) ctx.globalCompositeOperation = 'source-atop'
        ctx.drawImage(this._media, rect.cutX, rect.cutY, rect.cutW, rect.cutH, rect.drawX, rect.drawY, rect.drawW, rect.drawH)
        ctx.restore()
    }
}
const img = new A({
    x: 100,
    y: 100,
    width: 100,
    height: 200,
    radius: 100,
    borderWidth: 1,
    borderColor: 'green',
    bgcolor: 'green'
})
img.mode = 'contain'
img.src = 'https://img.shanju.fun/cover/912/1595234448517'
console.log(img)

const v = new A({
    x: 200,
    y: 400,
    width: 200,
    height: 200,
    radius: 100
})
v.mode = 'contain'
v.src = 'img/tnRSUUtbANUA.mp4'
document.onclick = () => {
    v._media.play()
    // v._media.style.position = 'absolute'
    // v._media.style.left = '95%'
    // v._media.style.top = '0'
    // document.body.appendChild(v._media)
}
function render(){
    img.render(ctx)
    v.render(ctx)
    requestAnimationFrame(render)
}
render()
// const world = new World(ctx, cv.width, cv.height)
// let box1 = world.create('div', {
//     fontSize: 16,
//     padding: [20, 20, 20, 20],
//     radius: [150, 150, 150, 150],
//     border: [4, 'green'],
//     width: 300,
//     height: 150,
//     overflow: 'hidden',
//     background: 'purple'
// })
// box1.text = `---只攻不守
// 令狐冲道：“是。”闭上眼睛，将这一晚所学大要，默默存想了一遍，突然睁开眼来，道：“太师叔，徒孙尚有一事未明，何以这种种变化，尽是进手招数，只攻不守？”风清扬道：“独孤九剑，有进无退！招招都是进攻，攻敌之不得不守，自己当然不用守了。
// ----要旨在于「悟性」
// 游戏《九阴真经》中的「独孤九剑」
// 游戏《九阴真经》中的「独孤九剑」(6张)
// 风清扬道：“你倒也不可妄自菲薄，独孤前辈是绝顶聪明之人，学他的剑法，要旨是在一个‘悟’字，决不在死记硬记。等到通晓了这九剑的剑意，则无所施而不可，无所不出，无所不入，便是将全部变化尽数忘记，也不相干，临敌之际，更是忘记得越干净彻底，越不受原来剑法的拘束。
// ----与「无招胜有招」剑理加合相辅相成`
// console.log(box1, world)
// world.render()
document.body.appendChild(cv)